/*
 * 产品页面视图
 * @Author: ljb
 * @Date: 2018-03-27 17:52:07
 * @Last Modified by: ljb
 * @Last Modified time: 2019-03-15 11:46:32
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    .v-admin-product-views {
        padding: 20px;
        .ivu-tabs {
            min-height: 600px;
        }
    }
</style>

<template>
	<div class="v-admin-product-views">

		<Tabs type="card">

			<TabPane
				:label="$t('common.check')"
				name="查看">

				<!-- 搜索组件 -->
				<search-form
					:customers="customers"
					@search="confirmSearch"/>

				<product-index
					:loading="table_loading"
					:brands="brands"
					:customers="customers"
					:products="products.data"
					@sort="confirmSearch"/>

				<br>

				<!-- 分页组件 -->
				<Row
					type="flex"
					justify="center">
					<Page
						:total="products.total"
						:current="products.current_page"
						:page-size="query_info.per_page"
						placement="top"
						show-sizer
						show-total
						@on-change="pageChange"
						@on-page-size-change="perPageChange"/>
				</Row>

			</TabPane>

		</Tabs>

	</div>

</template>

<script>

import API_LIST from 'src/API_LIST';
import { mapMutations } from 'vuex';
import qs from 'qs';

import productIndex from './index';
import searchForm from './search-form';

export default {

	name: 'ProductViews',

	components: {
		productIndex,

		searchForm,
	},
	data() {
		return {
			query_info: {
				page: 1,

				per_page: 20,

				customer_id: '',

				is_sale: '',

				is_deleted: '',

				sort_column: '',

				sort_by: '',
			}, // 搜索参数

			search_info: {
				page: 1,
			}, // 分页信息

			table_loading: false, // 表格更新时的loading

			products: {}, // 产品列表

			brands: {}, // 品牌

			customers: {}, // 客户

		};
	},
	mounted() {
		this.fetchCustomer();
		this.fetchProductList(this.query_info);
	},
	methods: {

		...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),

		/**
         * 页码改变
         * @param  {string} pageNumber {当前页码}
         * @return {undefined}
         */
		pageChange(pageNumber) {
			this.search_info.page = pageNumber;

			this.search_info.per_page = this.query_info.per_page;

			this.fetchProductList(this.search_info);
		},

		/**
         * 每页显示数改变
         * @param  {string} per_page {当前每页显示数}
         * @return {undefined}
         */
		perPageChange(per_page) {
			this.search_info.per_page = per_page;

			this.query_info.per_page = per_page;

			this.fetchProductList(this.query_info);
		},

		/**
         * 确认搜索
         * @param  {Object} param {搜索的参数对象}
         * @return {undefined}
         */
		confirmSearch({
			customer_id, is_sale, is_deleted, sort_column, sort_by,
		}) {
			this.query_info.customer_id = customer_id || '';

			this.query_info.is_sale = is_sale || '';

			this.query_info.is_deleted = is_deleted || '';

			this.query_info.sort_column = sort_column || '';

			this.query_info.sort_by = sort_by || '';

			this.search_info = JSON.parse(JSON.stringify(this.query_info));

			this.fetchProductList(this.query_info);
		},

		/**
         * 获取客户
         * @return {undefined}
         */
		fetchCustomer() {
			this.showSpin(this.$t('common.please_wait'));

			this.$http.get(`${API_LIST.PRODUCT}/create`)
				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);

					this.customers = data.customers;

					this.brands = data.brands;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(this.closeSpin);
		},

		/**
         * 获取产品列表
         * @param  {Object} param {搜索列表的参数}
         * @return {undefined}
         */
		fetchProductList(param) {
			this.table_loading = true;

			const query_str = qs.stringify(param);

			this.$http.get(`${API_LIST.PRODUCT}?${query_str}`)
				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);

					this.products = data.products;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(() => { this.table_loading = false; });
		},
	},
};
</script>
